<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <!-- 搜索筛选 -->
            <el-card class="box-card">
                <el-form :inline="true" :model="formInline" class="user-search">
                    <el-form-item label="" style="margin-bottom:0px;">
                        <el-input size="small" v-model="formInline.missionName" placeholder="任务名称"></el-input>
                    </el-form-item>
                    <el-form-item label="" style="margin-bottom:0px;">
                        <el-input size="small" v-model="formInline.empName" placeholder="负责员工姓名"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom:0px;">
                        <el-button size="small" @click="search">查询</el-button>
                        <el-button size="small" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

            <div class="interspaceH"></div>

            <el-card class="box-card">
                <!-- 按钮 -->
                <el-form :inline="true" class="user-search">
                    <el-form-item>
                        <el-button size="small" icon="el-icon-plus" type="primary" @click="show">新建群邀请任务</el-button>
                        <!--                        <el-button size="small" type="primary" @click="">删除</el-button>-->
                    </el-form-item>
                </el-form>

                <!--列表-->
                <el-table size="small" :data="listData" style="width: 100%;">
                    <el-table-column prop="missionName" label="任务名称" width="200">
                    </el-table-column>
                    <el-table-column prop="missionStatus" label="任务状态" >
                    </el-table-column>
                    <el-table-column prop="empName" label="发送邀请员工" >
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建日期" >
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="150">
                        <template slot-scope="scope">
                            <el-button type="text" @click="details('detail',scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                               :current-page="pagePagination.currentPage"
                               :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="pagePagination.total">
                </el-pagination>
            </el-card>


            <!-- 添加任务 -->
            <el-dialog :visible.sync="formVisible" width="40%" @click="tagClose" style="padding:0px;" title="添加任务">
                <div>
                    <el-form ref="form" :model="taskForm" label-width="200px" size="small"
                             style="padding-bottom: -10px;">
                        <el-form-item label="任务名称：">
                            <el-input v-model="taskForm.missionName" style="width: 70%"></el-input>
                        </el-form-item>
                        <el-form-item label="选择群发员工：">
                            <el-button type="primary" @click="addEmp()">+ 添加员工</el-button>
                            <el-tag v-for="tag in members" :key="tag.empName" closable @close="closeTagHandle(tag)"
                                    style="margin-right: 10px">{{tag.empName}}
                            </el-tag>
                            已选择{{members.length}}个员工
                        </el-form-item>
                        <el-form-item label="联系人筛选：">
                            <div v-for="(item, index) in contentList" :key="index" style="width: 80%">
                                <div style="display:flex;align-items: center">
                                    <div style="flex: 5">
                                        <el-radio v-model="taskForm.contentTypeRadio" label="1">按标签筛选客户</el-radio>
                                        <el-radio v-model="taskForm.contentTypeRadio" label="2">全体客户</el-radio>
                                    </div>
                                </div>
                                <div>
                                    <el-card v-if="taskForm.contentTypeRadio == '1'" class="taskContent">
                                        <div>
                                            <el-form :model="itemForm">
                                                <el-form-item label="性别：">
                                                    <el-radio v-model="itemForm.itemFormRadio" label="2">全部</el-radio>
                                                    <el-radio v-model="itemForm.itemFormRadio" label="0">男</el-radio>
                                                    <el-radio v-model="itemForm.itemFormRadio" label="1">女</el-radio>
                                                </el-form-item>
                                                <el-form-item label="添加时间：">
                                                    <el-date-picker size="small" style="width: 70%"
                                                                    v-model="taskForm.createTime"
                                                                    type="datetimerange"
                                                                    range-separator="至"
                                                                    start-placeholder="开始日期"
                                                                    end-placeholder="结束日期">
                                                    </el-date-picker>
                                                </el-form-item>
                                                <br>
                                                <el-form-item>
                                                    <el-tag v-for="tag in taskForm.tagNameList" :key="tag.name" closable
                                                            @close="closeTagHandle"> {{ tag }}
                                                    </el-tag>
                                                    <el-button type="text" icon="el-icon-circle-plus-outline"
                                                               @click="showTagInput">添加标签
                                                    </el-button>
                                                    <el-input style="width: 100px"
                                                              v-if="tagVisible" v-model="tagValue" ref="saveTagInput"
                                                              size="small" @keyup.enter.native="tagConfirmHandle"
                                                              @blur="tagConfirmHandle"></el-input>
                                                </el-form-item>
                                            </el-form>
                                        </div>
                                    </el-card>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="入群引导语：">
                            <el-input type="textarea" rows="4" v-model="taskForm.missionMessage" style="width: 70%"
                                      placeholder="请输入新客户入群引导语"></el-input>
                        </el-form-item>
                        <el-form-item label="群聊：">
                            <el-button @click="addClientGroup()"> + 添加群聊</el-button>
                            <el-tag v-if="clientGroup.clientGroupName"> {{ clientGroup.clientGroupName }}</el-tag>
                            <MaterialContentText ref="contentText" :contentType="[2]" disabledAdd="false"
                                                 :imageList="imageList" style="width:60%;padding: 0px;"/>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" class="dialog-footer" align="center" style="clear: both;">
                    <el-button size="small" @click="tagClose">取消</el-button>
                    <el-button size="small" type="primary"  @click="saveTask()">确定</el-button>
                </div>
            </el-dialog>
            <!-- 添加群聊 -->
            <el-dialog title='添加群聊' :visible.sync="addClientGroupVisible" width="40%" @click="close">
                <div style="padding: 0px 0px 0px 30px;">
                    <ListSelect @getData="getData" :listFields="listGroupFields" :dataSource="listGroup"/>
                    <div class="button-center" style="padding: 10px 10px;">
                        <el-button size="mini" @click="addClientGroupVisible = false">取消</el-button>
                    </div>
                </div>
            </el-dialog>

            <!-- 添加员工 -->
            <el-dialog title='添加员工' :visible.sync="addEmpVisible" width="40%" @click="close">
                <div style="padding: 0px 0px 0px 30px;">
                    <MultipleSelect ref="selectMultipleMember" :listFields="listFields" :dataSource="transferData"/>
                    <div class="button-center" style="padding: 10px 10px;">
                        <el-button size="mini" @click="close">取消</el-button>
                        <el-button size="mini" type="primary" @click="getEmpHandle()">确定</el-button>
                    </div>
                </div>
            </el-dialog>

            <!-- 替换员工 -->
            <el-dialog title='添加员工' :visible.sync="editEmpVisible" width="40%" @click="close">
                <div style="padding: 0px 0px 0px 30px;">
                    <ListSelect @getData="getEmpData" :listFields="listEmpFields" :dataSource="listEmp"/>
                    <div class="button-center" style="padding: 10px 10px;">
                        <el-button size="mini" @click="editEmpVisible = false">取消</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>


        <!-- 详情 -->
        <div v-if="currentPanel == 'detail'">
            <Detail :parentData="param" @currentHandle="details" :group="data"/>
        </div>
    </div>
</template>

<script>
    import MultipleSelect from "@/components/list_multiple_select/list_multiple_select"
    import ListSelect from "@/components/list_select/list_select"
    import Detail from "@/views/custGroup/tagCreate/detail"
    import MaterialContentText from "@/components/material_content_text/material_content_text"
    import ElementUI from 'element-ui'
    // 修改 el-dialog 默认点击遮照为不关闭
    ElementUI.Dialog.props.closeOnClickModal.default = false;
    const contentList = [
        {
            contentType: 1,
            content: '',
            imageUrl: '',
            linkContent: {
                linkAddress: '',
                linkTitle: '',
                content: ''
            },
            radio: ''
        }
    ]
    export default {
        props: {
            contentList: {
                type: Array,
                default() {
                    return [...contentList];
                }
            },
        },
        data() {
            return {
                currentPanel: 'list',
                param: {},
                // 用户数据
                listData: [],
                // 新增显示
                formVisible: false,
                formEditVisible: false,
                taskForm: {
                    contentTypeRadio: '1',
                },
                taskEditForm: {
                    contentTypeRadio: '1',
                },
                contentTypeRadio: '1',
                itemFormRadio: '1',
                wxChatData: {},
                itemForm: {},
                addEmpVisible: false,
                members: [],
                clientMembers: [],
                tagVisible: false,
                tagValue: '',
                value: '',
                titles: '',
                tagGroupForm: {},
                listGroup: [],

                listEmp: [],
                clientGroup: {},
                emp: {},
                listFields: {
                    empName: '员工姓名'
                },
                listGroupFields: {
                    clientGroupName: '群聊名称'
                },
                listEmpFields: {
                    empName: '员工名称'
                },
                transferData: [],
                transferEmpDataData: [],
                addClientGroupVisible: false,
                editEmpVisible: false,

                addClientVisible: false,

                // 编辑显示
                wordsFormVisible: false,

                //详情
                wordsDetailVisible: false,
                wordsDetailForm: {},

                radio: '1',
                formInline: { // 搜索框内容对象
                    missionName: '',
                    empName: ''
                },

                wordsForm: {},

                tableData: [],

                data: {
                    id: '',
                    groupName: '',
                    lordName: '',
                    groupTag: '',
                    createTime: ''
                },

                options: [{
                    value: '',
                    label: ''
                }],
                imageList: [],
                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
            }
        },

        // 注册组件
        components: {
            MultipleSelect,
            ListSelect,
            Detail,
            MaterialContentText,
        },
        mounted() {
            this.queryDataHandle()
        },

        methods: {
            queryDataHandle() {
                let that = this
                this.$request("/api/task/getTaskList/1_0", {taskCorrelationType: '2'}, "POST").then((data) => {
                    that.listData = data.rows
                    that.pageparm = {
                        currentPage: 1,
                        pageSize: 10,
                        total: data.total
                    }
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },

            getData(data) {
                this.clientGroup = data
                this.addClientGroupVisible = false

            },
            getEmpData(data) {
                this.emp = data
                this.editEmpVisible = false
            },
            // 添加群聊任务
            show() {
                this.formVisible = true;
                this.title = '添加群聊任务'
            },

            // 关闭批量打标签弹出框
            tagClose() {
                this.formVisible = false
            },
            addClientGroup() {
                let that = this
                that.title = '添加群聊'
                that.$request("/api/custGroup/selectGroup/1_0", "", "POST").then((data) => {
                    that.listGroup = [...data.rows]
                    that.addClientGroupVisible = true
                })
            },
            //添加员工页面打开
            addEmp() {
                let that = this
                that.title = '添加员工'
                that.$request("/api/emp/getAllEmp/1_0", {}, "POST").then((data) => {
                    that.transferData = [...data.rows]
                    that.addEmpVisible = true
                })
            },
            // 查询
            search() {
                let that = this
                let payData = {
                    taskCorrelationType: '2',
                    missionName: this.formInline.missionName,
                    empName: this.formInline.empName,
                    pageNum: 1,
                    pageSize: 10
                }
                this.$request("/api/task/getTaskList/1_0", payData, "POST").then((data) => {
                    that.listData = data.rows
                    that.pageparm = {
                        currentPage: 1,
                        pageSize: 10,
                        total: data.total
                    }
                })
            },
            // 重置
            reset() {
                this.formInline = {}
            },
            // 新建话术关闭
            handleClosr() {
                this.wordsFormVisible = false;
            },
            currentHandler() {
                this.wordsDetailVisible = true;
            },
            //添加员工 添加方法
            getEmpHandle() {
                let data = this.$refs.selectMultipleMember.getData();
                this.addEmpVisible = false
                this.members = data
            },
            filterMethod() {
            },
            close() {

            },
            closeTagHandle(tag) {
                this.taskForm.members.splice(this.taskForm.members.indexOf(tag), 1);
            },
            saveTask() {
                let that = this
                let len = this.members.length;
                // this.$request("/api/task/getMediaId/1_0",{picUrl:this.taskForm.picUrl,sendType:"2"} , "POST").then((data) => {
                //     console.log(data)
                // })
                for (let i = 0; i < len; i++) {
                    let mission = {
                        missionName: that.taskForm.missionName,
                        missionStatus: "创建",
                        sendType: "2",
                        sendEmpId: that.members[i].empId,
                        taskCorrelationType: "2",
                        missionInfoType: '1',
                        missionMessage: that.taskForm.missionMessage,
                        client: that.taskForm.contentTypeRadio,
                        clientSex: that.itemFormRadio,
                        tagList: that.taskForm.tagNameList,
                        clientGroupId: that.clientGroup.clientGroupId,
                        mediaId: '11234567890',
                        picUrl: that.taskForm.picUrl,
                        imageList: that.$refs.contentText.getData()
                    }
                    that.$request("/api/task/addTagTask/1_0", mission, "POST").then((data) => {
                        if (data.data == 2) {
                            this.$message({
                                message: "操作成功 ！",
                                type: 'success'
                            });
                        }
                    })
                }
                this.$refs.contentText.initData()
                this.taskForm = {}
                this.formVisible = false
                this.queryDataHandle()
            },
            tagConfirmHandle() {
                let inputValue = this.tagValue;
                let that = this
                if (inputValue) {
                    if (that.taskForm.tagNameList == null) {
                        that.taskForm.tagNameList = []
                    }
                    that.taskForm.tagNameList.push(inputValue);
                }
                this.tagValue = '';
                this.tagVisible = false;
            },
            showTagInput() {
                this.tagVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput[0].$refs.input.focus();
                });
            },
            details(page, row) {
                this.data = row
                this.currentPanel = page;
            },
        }
    }
</script>

<style scoped>
    .user-search {
        /*margin-top: 20px;*/
    }

    .el-link {
        margin: 0 20px 0 20px;
    }

    .left {
        float: left;
        width: 65%;
    }

    .right {
        float: left;
        width: 30%;
        height: 100%;
    }

    .avatar {
        width: 200px;
    }

    .taskContent {
        padding: 20px;
    }
</style>
